import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import {AtTag } from 'taro-ui'
import loading from '../../img/item_image.png'
import './doctorindex.scss'
import touxiang from '../../img/touxiang3.png'
import right from '../../img/right.png'
import app from '../../main'


export default class Doctorindex extends Component {

  config = {
    navigationBarTitleText: '医生主页'
  }

  constructor () {
    super(...arguments)
    this.state={
        // 医生信息数据
        docinfo: {},
        //是否关了该医生
        guanzhu:'关注',
        //库普信息数据  
        kepuArr: []
    }
  }

   //点击关注   
  guanzhus(id){
    let me = this
    let data = {doctor_id:id}
    app.post('web/members/attention',data,function(res){
        let status = res.data.result.source
        me.setState({
            guanzhu : res.data.result.source
        })
    })
  }

  //跳转到付款咨询
  gotoDoctorsession(){
    var me = this;
    var doctor_id = this.$router.params.id;
    app.get('web/myself/is_has_order', {doctor_id: doctor_id, patient_id: app.current.id}, function(res) {
        var result = res.data.result;
        if (result.is_has_order) {
            app.redirectTo('../chatsub/pages/Chat/Chat?type='+result.type+'&relate_id='+result.order_id+'&receiver_id='+doctor_id)
        } else {
            app.redirectTo('../doctorsession/doctorsession'+'?doc_id='+me.state.docinfo.id)
        }
    })
  }

  //跟多科普跳转
  gotokepu(){
    app.navigateTo('../aiyanPolular/aiyanPolular'+'?doc_id='+this.state.docinfo.id);
  } 

  navigateTo(url) {
    app.navigateTo(url);
  }

  //消息提示框 显示擅长成就
  show(){
    if(this.state.docinfo.speciality != null && this.state.docinfo.speciality && this.state.docinfo.speciality != ''){
        Taro.showModal({
            title: '擅长成就',
            content: this.state.docinfo.speciality,
            showCancel:false,
            confirmColor:'#0000FF'
        })
    }else{
        Taro.showModal({
            title: '擅长成就',
            content: '暂无擅长成就',
            showCancel:false,
            confirmColor:'#0000FF'
          }) 
    }
  }
  
  //消息提示框 显示医生介绍
  introduce(){
    if(this.state.docinfo.summary != null && this.state.docinfo.summary != undefined && this.state.summary != '' ){
        Taro.showModal({
            title: '医生介绍',
            content: this.state.docinfo.summary,
            showCancel:false,
            confirmColor:'#0000FF'
          })
    }else{
        Taro.showModal({
            title: '医生介绍',
            content: '暂无介绍',
            showCancel:false,
            confirmColor:'#0000FF'
          })
    }
  }
  
  //获取医生数据 
  getDdate(){
    let me = this
    let doctor_id = {doctor_id:this.$router.params.id}
    //获取医生信息数据 
    app.post('web/members/doctorHome',doctor_id,function(res){  
        me.setState({
            docinfo:res.data.result
        })
    });
    // 获取该医生科普数据
    let data={offset:0,length:4,doctor_id:this.$router.params.id}
    app.post('video_recommends/videoList',data,function(res){
        me.setState({
            kepuArr:res.data.result.list
        })
    })
    // 获取关注数据
    app.get('web/members/attentionStatus',doctor_id,function(res){
        console.log('res',res)
        me.setState({
            guanzhu : res.data.result.source
        })
    })
  }
  componentDidMount(){
    this.getDdate()
  }

  goto() {
    app.toastMessage('暂未开放，敬请期待')
  }

  render () {
    //我发表的健康科普
    const PolularInfoss = this.state.kepuArr;
    const listItem = PolularInfoss.map((item) => {
        return <View className='PolularInfo' onClick={this.navigateTo.bind(this, '../aiyanPolularVideo/aiyanPolularVideo?kepuid='+item.id)}>
                    <View><Image className='polular-Image' src={item.image}/></View>
                    <View className='polular-text'>
                        <View className='title'>{item.title}</View>
                        <View className='authorInfo'>
                            <View><Image className='authorInfo-image' src={item.head_image}/></View>
                            <View className='text-column'>
                                <View><Text>{item.name}</Text><Text className='t'>{item.positional_title}</Text></View>
                                <View>{item.hospital}</View>
                            </View>
                        </View>
                    </View>
              </View>
    })
    //医生擅长和医生介绍处理
    let speciality = this.state.docinfo.speciality //擅长成就
    let summary = this.state.docinfo.summary//医生介绍
    if(!app.isEmpty(speciality) && speciality.length > 80){
        speciality = speciality.substr(0,80);
        speciality = speciality+"...";
    }else{
        speciality = speciality
    }
    if(!app.isEmpty(summary) && summary.length > 80){
        summary = summary.substr(0,80);
        summary = summary+"...";
    }else{
        summary = summary;
    }

    return (
      <View className='doctorindex'>
          <View className='top'>
                {/* 医生信息 */}
                <View className='top-2'>  
                    <View className='top-2-1'>
                        <Image
                        className='top-2-image'
                        src={app.getPath(this.state.docinfo.head_image)}
                        />
                    </View>
                    <View className='top-2-2'>
                        <View><Text className='name'>{this.state.docinfo.name}</Text></View>
                        <View><Text className='title'>{this.state.docinfo.positional_title}</Text></View>
                        <View><Text className='title'>{this.state.docinfo.hospital}</Text></View>
                        {/*<View className='tags'>
                            {this.state.docinfo.labels.map((item) => {
                                return (item !='') ? <AtTag circle type='primary' className='tag'>{item}</AtTag> : null 
                            })}
                        </View>*/}
                    </View>
                    <View className='top-btn' onClick={this.guanzhus.bind(this,this.state.docinfo.id)}>
                        <Text>{this.state.guanzhu}</Text>
                    </View>
                </View>
                <View className='top-3'>    
                    <View className='top-3-1'>
                        <View className='title'><Text>{this.state.docinfo.server_number}</Text></View>
                        <View className='title'><Text>服务人数</Text></View>
                    </View>
                    <View className='top-3-1'>
                        <View className='title'><Text>{this.state.docinfo.reply_number}</Text></View>
                        <View className='title'><Text>回复次数</Text></View>
                    </View>
                    <View className='top-3-1'>
                        <View className='title'><Text>{this.state.docinfo.general_score}</Text></View>
                        <View className='title'><Text>综合口碑</Text></View>
                    </View>
                </View>
          </View>
            {/* 我的服务 */}
          <View className='center'>
                {/* 擅长成就 */}
                <View className='center-2'>
                    <View className='center-2-1' onClick={this.show.bind(this)} style='background:#fff;'>
                        <View className='title'>擅长成就</View> 
                        <View><Image src={right} className='right-image'/></View>
                    </View>             
                    <View className='cemter-2-2' style='background:#fff;'>
                    {(speciality !='' && speciality != null && speciality != undefined)?<Text className='tttt'>{speciality}</Text>:null}
                    </View>
                    {/* 医生介绍 */}
                    <View className='center-2-3' onClick={this.introduce.bind(this)} style='background:#fff;'>
                        <View className='title'>医生介绍</View>
                        <View><Image src={right} className='right-image'/></View>
                    </View>
                    <View className='center-2-4' style='background:#fff;'>
                    {(summary !='' && summary != null && summary != undefined)?<Text className='tttt' >{summary}</Text>:null}                               
                    </View>
                </View>
          </View>
            {/* 我发表的健康科普 */}
          <View className='botton'>   
              <View className='botton-1' style='background:#fff;'>
                    <View className='title'>我发表的健康科普 </View>
                    <View className='title' onClick={this.gotokepu}>更多<Image className='right-image' src={right}/></View>
              </View>
              {/* 科普列表 */}
              <View className='botton-2' style='background:#fff;'>
                    {listItem}
              </View>
          </View>
           {/*在线咨询*/}
          <View className='consultation' onClick={this.gotoDoctorsession.bind(this)}>
               <View className='btn'>在线咨询</View>
          </View>
      </View>
    )
  }
}